<template>
    <div class="echarts" ref="echartsColumn" :style="{ minHeight: '100px' }"></div>
</template>
<script>
import { onResizeChang, markLineF } from "@/common/js/common.js";
let itemStyleColor = ["#19859E", "#29DDCF", "#0777C1"];
export default {
    name: "ColumEchartsPie",
    props: {
        /** 包含
         *  markLine：{
         *  label:'',// 名称
         *  value:'',// 固定值
         * }
         *
         */
        // 一些配置项
        setting: {
            type: Object,
            default: () => { },
        },
        // 数据
        data: {
            type: [Object, Array],
            default: () => [],
        },
        onCallBack: {
            type: Function,
            default: () => { }
        }
    },
    data() {
        return {
            timesName: null,
        };
    },
    created() {
        // 监听屏幕改变的话就调用
        onResizeChang("start", this.onResizeChange);
    },
    methods: {
        echartInit() {
            var myChart = this.$echarts.init(this.$refs.echartsColumn);
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: (e) => {
                        let extra = e.data.bc ? `（${e.data.bc}）` : ''
                        return `${e.name}：${e.value}${extra}`
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['0%', '70%'],
                        labelLine: {
                            length: 30
                        },
                        label: {
                            formatter: (e) => {
                                let extra = e.data.bc ? `{per|${e.data.bc}}` : ''
                                return `  {b|${e.name}：}{c|${e.value}}  ${extra}  `
                            },
                            backgroundColor: '#F6F8FC',
                            borderColor: '#8C8D8E',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                b: {
                                    color: '#4C5058',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#fff',
                                    backgroundColor: '#4C5058',
                                    padding: [3, 4],
                                    borderRadius: 4
                                },
                                c: {
                                    fontWeight: 'bold',
                                    fontSize: 14,
                                }
                            }
                        },
                        data: this.data,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    // 根据不同的索引设置颜色
                                    var colorList = ['#87CEFA', '#9370DB', '#c0d9d9', '#dcdcdc', '#996633', '#FFC0CB','#EEE8AA',  '#DA70D6', '#9ACD32', '#6495ED', '#F08080', '#D2B48C', '#8FBC8F'];
                                    return colorList[params.dataIndex % (colorList.length)];
                                }
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);

        },
        // 重新计算
        onResizeChange() {
            var myChart = this.$echarts.init(this.$refs.echartsColumn);
            myChart.resize();
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.echartInit();
            if (typeof (this.onCallBack) == 'function') {
                var myChart = this.$echarts.init(this.$refs.echartsColumn);
                myChart.on('click', (params) => {
                    this.onCallBack(params);
                });
            }
        });
    },
    watch: {
        data(newVal, oldVal) {
            // 当 parentData 变化时，这个函数会被调用
            this.echartInit();
        },
    },
    computed: {
        // data里面包含 label value
        getSplitData() {
            let arr = {
                label: [],
                value: [],
            };
            this.data.filter((val, index) => {
                arr["label"].push(val.label);
                arr["value"].push(val.value);
            });
            return arr;
        },
        labelColor() {
            if (this.setting.label && this.setting.label.color) {
                return this.setting.label.color;
            } else {
                return "#000000";
            }
        },
    },
    // 销毁
    beforeDestroy() {
        onResizeChang("end", this.onResizeChange);
        clearInterval(this.timesName);
        this.timesName = null;
    },
};
</script>
<style lang="less" scoped>
.echarts {
    width: 100%;
    height: 100%;
}
</style>